<template>
  <div class="app-container">
    <div>临时文件目录占用大小: {{ formatSizeHuman(tempFileSize) }}</div>
    <el-table
      :data="files"
      border
      stripe
      style="width: 100%"
      size="mini"
      lazy
      :load="loadChild"
      row-key="path"
      :tree-props="{children: 'children', hasChildren: 'directory'}"
    >
      <el-table-column
        prop="name"
        label="文件名"
        sortable
      />
      <el-table-column
        prop="path"
        label="路径"
      />
      <el-table-column
        prop="size"
        label="大小"
        sortable
      >
        <template slot-scope="scope">
          <!--          <el-button title="点击计算真实大小" v-if="scope.row.directory" @click="calcDirectorySize(scope.row)" type="text" size="small" >{{formatSizeHuman(scope.row.size)}}</el-button>-->
          <span>{{ formatSizeHuman(scope.row.size) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="lastUpdateTime"
        label="上次修改时间"
        sortable
        :formatter="formatTime"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <div v-if="!scope.row.delete">
            <el-button type="text" size="small" @click="deleteFiles(scope.row,scope.$index)">删除</el-button>
            <el-button type="text" size="small" @click="downloadFile(scope.row.path)">下载</el-button>
          </div>
          <div v-else>已删除</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import core from '@/api/core'
import { formatSizeHuman, parseTime } from '@/utils'

export default {
  name: 'file',
  data() {
    return {
      files: [],
      tempFileSize: 0
    }
  },
  mounted() {
    this.loadRoot()
  },
  methods: {
    formatSizeHuman,
    deleteFiles(row, index) {
      core.deleteFiles(row.path).then(res => {
        // 重新加载树; 暂只能让用户手动刷新; 网上的方法感觉太复杂了
        this.setRowDelete(row)
      })
    },
    setRowDelete(row) {
      this.$set(row, 'delete', true)
      if (row.children) {
        for (let i = 0; i < row.children.length; i++) {
          this.setRowDelete(row.children[i])
        }
      }
    },
    downloadFile(baseName) {
      core.fileDownload(baseName)
    },
    calcDirectorySize(row) {
      core.calcDirectorySize(row.path).then(res => {
        this.$set(row, 'size', res.data)
      })
    },
    formatTime(row, column) {
      return parseTime(row.lastUpdateTime, undefined)
    },
    formatSize(row, column) {
      return formatSizeHuman(row.size)
    },
    loadRoot() {
      core.childNames('').then(res => {
        this.files = res.data
        let size = 0
        for (let i = 0; i < this.files.length; i++) {
          size += this.files[i].size
        }
        this.tempFileSize = size
      })
    },
    loadChild(node, treeNode, resolve) {
      const findPath = node.level === 0 ? '' : node.path
      core.childNames(findPath).then(res => {
        resolve(res.data)
      })
    }
  }
}
</script>


